<template>
  <div class="discussion">
    <h2>讨论区互动</h2>
    <el-tabs v-model="activeTab">
      <el-tab-pane label="发表的主题" name="topics">
        <el-list>
          <el-list-item v-for="(topic, index) in topics" :key="index">
            <el-divider v-if="index !== 0" class="topic-divider"></el-divider>
            <p class="topic-title" @click="viewTopic(topic)">{{ topic.content }}</p>
            <p class="topic-info">
              <span class="author">{{ topic.publisher_id }}</span> 发表于 {{ topic.date }} | 来自 "<span class="category">{{ topic.post_type }}</span>"
            </p>
          </el-list-item>
        </el-list>
        <el-button type="primary" @click="postDialogVisible = true" style="margin-top: 20px;">发布讨论</el-button>
        <el-dialog title="发布讨论" v-model="postDialogVisible" width="30%">
          <el-form ref="postForm" :model="newTopic" label-width="80px">
            <el-form-item label="内容" required>
              <el-input type="textarea" v-model="newTopic.content" placeholder="请输入内容"></el-input>
            </el-form-item>
          </el-form>
          <template v-slot:footer>
            <span class="dialog-footer">
              <el-button @click="postDialogVisible = false">取消</el-button>
              <el-button type="primary" @click="submitTopic">发布</el-button>
            </span>
          </template>
        </el-dialog>
      </el-tab-pane>
      <el-tab-pane label="发表的回复" name="replies">
        <el-card v-for="(reply, index) in replies" :key="index" class="reply-card">
          <p>{{ reply.content }}</p>
          <p>{{ reply.publisher_id }} 回复于 {{ reply.date }} | 来自 "{{ reply.topic }}"</p>
          <div class="actions">
            <el-button type="text" @click="editReply(reply)">编辑</el-button>
            <el-button type="text" @click="deleteReply(reply)">删除</el-button>
          </div>
        </el-card>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import axios from '@/api/axios.js'; // 引入axios.js文件

export default {
  name: 'DiscussionBoard',
  data() {
    return {
      activeTab: 'topics', // 默认展示主题标签页
      topics: [
        // {
        //   content: '如何平衡和调整不同属性和数值之间的关系？',
        //   publisher_id: '张三',
        //   date: '2024年4月1日',
        //   post_type: '游戏开发'
        // },
        // {
        //   content: '如何平衡和调整不同属性和数值之间的关系？',
        //   publisher_id: '张三',
        //   date: '2024年4月1日',
        //   post_type: '游戏开发'
        // },
        // {
        //   content: '如何平衡和调整不同属性和数值之间的关系？',
        //   publisher_id: '张三',
        //   date: '2024年4月1日',
        //   post_type: '游戏开发'
        // },
        // {
        //   content: '如何平衡和调整不同属性和数值之间的关系？',
        //   publisher_id: '张三',
        //   date: '2024年4月1日',
        //   post_type: '游戏开发'
        // }
        // 其他主题数据按需添加
      ],
      replies: [
        // 回复数据按需添加
      ],
      postDialogVisible: false,
      newTopic: {
        publisher_id: 1, // 当前用户ID，需要替换成实际用户ID
        content: '222',
        post_type: 'discussion',
        semester_id: 1 // 当前学期ID，需要替换成实际学期ID
      }
    };
  },
  methods: {
    fetchDiscussions() {
      axios.get('http://10.33.11.66:8080/post/getPost?publisher_id=1') // 发送GET请求获取数据
        .then(response => {
          // 处理响应数据
          console.log(response.data); // 输出响应数据，方便调试
          if (response.data.status === 1) {
            this.topics = response.data.data; // 将获取的数据赋值给topics数组
          } else {
            this.$message.error(response.data.msg); // 若获取失败，显示错误消息
          }
        })
        .catch(error => {
          console.error('Error fetching discussions:', error); // 输出错误信息，方便调试
          this.$message.error('获取讨论区数据失败'); // 显示通用错误消息
        });
    },
    viewTopic(topic) {
      // 跳转到其他页面的逻辑，比如路由跳转
      this.$router.push({ path: '/topic-detail', query: { title: topic.content } });
    },
    submitTopic() {
      if (this.newTopic.content) {
        axios.post('http://10.33.11.66:8080/post/setPost', this.newTopic)
          .then(response => {
            console.log(response.data); // 输出响应数据，方便调试
            if (response.data.status === 1) {
              this.topics.push(response.data.data); // 将新发布的主题添加到topics数组
              this.postDialogVisible = false;
              this.$refs.postForm.resetFields();
              this.resetNewTopic();
              this.$message.success('发布成功');
            } else {
              this.$message.error(response.data.msg); // 若发布失败，显示错误消息
            }
          })
          .catch(error => {
            console.error('Error submitting topic:', error); // 输出错误信息，方便调试
            this.$message.error('发布讨论失败'); // 显示通用错误消息
          });
      } else {
        this.$message.error('请输入内容');
      }
    },
    resetNewTopic() {
      this.newTopic = {
        publisher_id: 1, // 当前用户ID，需要替换成实际用户ID
        content: '222',
        post_type: 'discussion',
        semester_id: 1 ,
        update_time:'2024/7/11' 
      };
    },
    editTopic() {
      // 编辑主题逻辑
    },
    deleteTopic() {
      // 删除主题逻辑
    },
    editReply() {
      // 编辑回复逻辑
    },
    deleteReply() {
      // 删除回复逻辑
    }
  },
  mounted() {
    this.fetchDiscussions(); // 在组件加载后调用获取数据的方法
  }
};
</script>

<style scoped>
 discussion {
  margin-left: 50px;
  margin-top: 20px;
  width: calc(100% - 350px);
  height: 100%;
  background: rgba(245, 245, 245, 1);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 20px;}

h2 {
  color: #409EFF;
  font-size: 24px;
  margin-bottom: 20px;
}

.el-tabs {
  width: 100%;
}

.el-list-item {
  margin-bottom: 10px;
  font-size: 16px;
}

.el-divider {
  margin: 10px 0;
  border-color: #dcdcdc; /* 设置灰色分隔线 */
}

.topic-divider {
  border-color: #dcdcdc; /* 设置灰色分隔线 */
}

.topic-title {
  font-size: 18px;
  font-weight: bold;
  cursor: pointer;
  color: #282c30;
}

.topic-title:hover {
  text-decoration: underline;
  background-color: rgba(64, 158, 255, 0.1); /* 添加背景色变化 */
}

.topic-info {
  font-size: 14px;
  color: rgba(96, 102, 102, 0.8);
}

.author, .category {
  color: #409EFF;
}

.el-button {
  margin-top: 10px;
}

.reply-card {
  background-color: white; /* 设置卡片背景色为白色 */
  margin-bottom: 10px;
  padding: 20px;
  border-radius: 5px;
}
</style>